<template>
  <div class="turnover-stats">
    <!-- 头部区域 -->
    <div class="header">
      <div class="header-left">
        <button
          class="back-button"
          @click="goBack"
        >
          <i class="iconfont icon-arrow-left"></i>
        </button>
        <h1 class="title">营业额统计</h1>
      </div>
    </div>

    <!-- 统计概览区域 -->
    <div class="stats-overview">
      <div class="month-selector">
        <input
          type="month"
          v-model="currentMonth"
          @change="changeMonth"
          class="month-input"
        />
        <i class="iconfont icon-calendar"></i>
      </div>

      <div class="summary-card">
        <div class="summary-header">
          <div class="summary-title">本月总计</div>
          <div class="summary-amount">{{ stats.total_amount || 0 }}元</div>
        </div>

        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-label">实收金额</div>
            <div class="stat-value positive">{{ stats.total_deposit || 0 }}元</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">订单金额</div>
            <div class="stat-value">{{ stats.total_amount || 0 }}元</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">待收尾款</div>
            <div class="stat-value negative">{{ stats.total_final_payment || 0 }}元</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <div class="list-header">
        <div class="header-cell" style="width: 25%">客户名称</div>
        <div class="header-cell" style="width: 20%">服务类型</div>
        <div class="header-cell" style="width: 20%">订单日期</div>
        <div class="header-cell" style="width: 35%">金额</div>
      </div>

      <div class="list-body">
        <div
          v-if="loading"
          class="loading-mask"
        >
          <div class="loading-spinner"></div>
        </div>

        <div
          v-if="orders.length === 0 && !loading"
          class="empty-tips"
        >
          <i class="iconfont icon-box"></i>
          <div class="empty-text">暂无订单数据</div>
        </div>

        <div
          v-for="(order, index) in orders"
          :key="order.order_id"
          class="order-item"
          :style="{borderLeft: `4px solid ${getOrderColor(index)}`}"
        >
          <div class="order-cell" style="width: 25%">
            <div class="customer-name">{{ order.customer_name || '未命名客户' }}</div>
            <div class="order-id">#{{ order.order_id }}</div>
          </div>
          <div class="order-cell" style="width: 20%">{{ order.type || '--' }}</div>
          <div class="order-cell" style="width: 20%">{{ order.order_date }}</div>
          <div class="order-cell" style="width: 35%">
            <div class="amount-row">
              <span class="amount-label">总金额:</span>
              <span class="amount-value">{{ order.total_amount }}元</span>
            </div>
            <div class="amount-row">
              <span class="amount-label">定金:</span>
              <span class="amount-value positive">{{ order.deposit }}元</span>
            </div>
            <div class="amount-row">
              <span class="amount-label">尾款:</span>
              <span class="amount-value negative">{{ order.final_payment }}元</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { get } from "@/request";
import { useRouter } from "vue-router";

const router = useRouter();
const currentMonth = ref(getCurrentMonth());
const stats = ref({});
const orders = ref([]);
const loading = ref(false);

// 获取当前月份，格式为YYYY-MM
function getCurrentMonth() {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  return `${year}-${month}`;
}

// 返回上一页
const goBack = () => {
  router.go(-1);
};

// 月份变化时重新加载数据
const changeMonth = () => {
  fetchTurnoverStats();
};

// 获取营业额统计数据
const fetchTurnoverStats = async () => {
  loading.value = true;
  try {
    const res = await get(`/order/statsByMonth?month=${currentMonth.value}`);
    if (res && res.code === 200) {
      stats.value = res.data.stats || {};
      orders.value = res.data.orders || [];
    }
  } catch (error) {
    console.error("获取营业额统计数据失败:", error);
  } finally {
    loading.value = false;
  }
};

// 为订单项生成不同的边框颜色
const getOrderColor = (index) => {
  const colors = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#909399'];
  return colors[index % colors.length];
};

// 初始化加载数据
onMounted(() => {
  fetchTurnoverStats();
});
</script>

<style scoped lang="less">
.turnover-stats {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

  .header-left {
    display: flex;
    align-items: center;

    .title {
      margin: 0;
      font-size: 20px;
      font-weight: 500;
      color: #303133;
    }
  }
}

.back-button {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    border-color: var(--bs-theme-color);
    color: var(--bs-theme-color);
  }

  .iconfont {
    font-size: 14px;
  }
}

.stats-overview {
  margin-bottom: 20px;
}

.month-selector {
  position: relative;
  margin-bottom: 15px;
  
  .month-input {
    width: 180px;
    height: 36px;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    background-color: #fff;
    appearance: none;
    
    &:focus {
      outline: none;
      border-color: var(--bs-theme-color);
    }
  }
  
  .iconfont {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #909399;
  }
}

.summary-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
  
  .summary-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
  
  .summary-amount {
    font-size: 20px;
    font-weight: 600;
    color: var(--bs-theme-color);
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.stat-item {
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
  
  .stat-label {
    font-size: 12px;
    color: #909399;
    margin-bottom: 5px;
  }
  
  .stat-value {
    font-size: 16px;
    font-weight: 500;
    color: #606266;
    
    &.positive {
      color: #67C23A;
    }
    
    &.negative {
      color: #F56C6C;
    }
  }
}

.order-list {
  flex: 1;
  background-color: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.list-header {
  display: flex;
  background-color: #f5f7fa;
  font-weight: 600;
  color: #909399;
  border-bottom: 1px solid #ebeef5;
}

.header-cell {
  padding: 12px 16px;
  text-align: left;
}

.list-body {
  position: relative;
  min-height: 200px;
}

.order-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  transition: background-color 0.3s;
  
  &:hover {
    background-color: #f5f7fa;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

.order-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.customer-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
}

.order-id {
  font-size: 12px;
  color: #909399;
}

.amount-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.amount-label {
  font-size: 12px;
  color: #909399;
}

.amount-value {
  font-size: 13px;
  color: #606266;
  
  &.positive {
    color: #67C23A;
  }
  
  &.negative {
    color: #F56C6C;
  }
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.7);
  z-index: 10;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--bs-theme-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.empty-tips {
  padding: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;

  .iconfont {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .empty-text {
    font-size: 14px;
  }
}
</style>